<template>
  <div class="crud-opts">
    <span class="crud-flex">
      <!--左侧插槽-->
      <slot name="left"/>
      <img class="img" src="@images/update.png" alt="" @click="crud.toQuery()">
      <el-button class="btn-height" icon="el-icon-link" :disabled="crud.selections.length != 1"
                 @click="connectTest(crud.selections[0])"
                 style="width: 32px; border-radius: 0; border: 1px solid #a7c7f2; margin-right:10px;background: rgb(244 248 253) !important"></el-button>
      <el-popover placement="bottom-end" width="150" trigger="click">
        <img class="img" aria-hidden="true" slot="reference" src="@images/gezi.png" alt="">
        <el-checkbox v-model="allColumnsSelected" :indeterminate="allColumnsSelectedIndeterminate"
                     @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <el-checkbox v-for="(item,i) in crud.props.tableColumns" :key="i" v-model="item.visible"
                     @change="handleCheckedTableColumnsChange(item)">
          {{ item.label }}
        </el-checkbox>
      </el-popover>
      <!--右侧-->
      <slot name="right"/>
    </span>
  </div>
</template>

<script>
import {checkConnect} from '@/api/system/node'
import CRUD, {crud, pagination} from '@crud/crud'

export default {
  mixins: [crud(), pagination()],
  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
    }
  },
  created() {

  },
  methods: {
    //节点测试连接
    connectTest(data) {
      this.$confirm('确认测试连接【' + data.agentName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '测试连接中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        checkConnect(data).then(res => {
          loading.close();
          if (res && "SUCCESS" === res) {
            this.$notify({
              title: '成功',
              message: '【' + data.agentName + '】连接成功!',
              type: 'success'
            })
          } else {
            this.$message({
              message: '【' + data.agentName + '】连接失败',
              type: 'warning'
            });
          }
        }).catch(() => {
          loading.close();
        })
      })
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.$message({
          message: '请至少选择一列',
          type: 'warning'
        });
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    }
  }
}
</script>

<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  height: 32px !important;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}

.crud-opts-left {
  display: flex;
  align-items: center;
}

.btn-height .el-icon-link {
  font-size: 21px;
  position: relative;
  right: 10px;
  bottom: 4px;
  color: #4488e3;
  font-weight: 600;
}
</style>
